<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { useIcon } from '@/hooks/web/useIcon'
import { reactive, watch, PropType, ref } from 'vue'
import {
  goodsSelect,
  transportSelect,
  placestartSelect,
  getPayTypeList,
  clientSelect,
  storeSelect,
  // consigneeSelect,
  // clientIndex,
  consigneeIndex,
  placeendSelect
} from '@/api/common'

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElDatePicker,
  ElSelect,
  ElOption,
  ElDivider,
  FormInstance,
  FormRules,
  ElUpload,
  ElButton,
  ElMessage
} from 'element-plus'
import { useCache } from '@/hooks/web/useCache'
import { NumberFormat } from 'vue-i18n'
import { formToJSON } from 'axios'

const { t } = useI18n()

const addIcon = useIcon({ icon: 'gala:add' })
const delIcon = useIcon({ icon: 'material-symbols:delete-outline' })

// const props = defineProps({
//   currentRow: {
//     type: Object as any,
//     default: () => null
//   }
// })

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  }
})
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.id = currentRow.id
    form.paymentAmountType = currentRow.paytype
    // form.typeOfGoods = currentRow.goods_id
    if (currentRow.goodsType && currentRow.goodsType.length > 0) {
      currentRow.goodsType.forEach((item) => {
        form.typeOfGoods.push(item.id)
      })
    }

    form.locationOfGoods = currentRow.store_id
    form.modeOfTransport = currentRow.transport
    form.origin = currentRow.placestart
    form.relatedCustomers = currentRow.client_code
    form.warehousingTime = currentRow.buytime
    form.serviceCharge = currentRow.servicefee
    form.collectionOfFreight = currentRow.freight
    form.factoryRebate = currentRow.rebate
    form.priceDifferenceOfGoods = currentRow.chajia
    form.productNameRemarks = currentRow.remark
    form.warehousingItems = currentRow.piece
    form.value = currentRow.worth
    form.moling = currentRow.moling
    form.recipient = currentRow.shouhuo
    // form.destination = Number(currentRow.placeend)
    form.destination = currentRow.placeend
    form.taxRate = currentRow.taxrate
    form.total_storage = currentRow.total_storage
    let goodsStr = currentRow.goods.replace(/&quot;/g, '"')
    let goodsArr: any = JSON.parse(goodsStr)
    console.log(goodsArr, 'item')
    goodsArr.forEach((item, i) => {
      // let copyItem = JSON.parse(JSON.stringify(item))
      // delete copyItem.gname
      // delete copyItem.goods_id
      // delete copyItem.worth
      console.log(item, 'item')
      let pieceItem: any = {
        key: i + 1,
        title: `${t('warehousingEntryAddWrite.goodsEntry')} ${i + 1} ：`,
        gname: item.gname, // 名称
        goods_id: item.goods_id, // 货物种类
        worth: item.worth, // 单件货值
        piece: item.piece,
        quantity: item.quantity,
        room: item.room,
        colour: item.colour,
        length: item.length,
        width: item.width,
        high: item.high,
        weight: item.weight,
        remark: item.remark,
        total: item.total,
        price: item.price,
        imgUrl: []
        // imgUrl: [item.image]
        // list: [
        //   {
        //     ...copyItem
        //   }
        // ]
      }
      pieceItem.imgUrl[0] = {
        name: '商品图' + i,
        path: item.image,
        url: item.image
      }
      form.pieceArray.push(pieceItem)
    })
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  id: '',
  paymentAmountType: '', //付款金额类型
  typeOfGoods: '', //货品种类
  locationOfGoods: '', //货物位置
  modeOfTransport: '', //运输方式
  origin: '', //始发地
  relatedCustomers: '', //关联客户
  warehousingTime: '', //入库时间
  serviceCharge: '', //服务费
  collectionOfFreight: '', //代付运费
  factoryRebate: '', //工厂返点
  priceDifferenceOfGoods: '', //货品差价
  productNameRemarks: '', //品名备注
  warehousingItems: '', //入库件数，
  value: '', //货值,
  moling: '', // 整单抹零
  recipient: '', // 收件人
  destination: '', // 目的地
  taxRate: '', // 税率
  total_storage: '', //总件数
  pieceArray: [] //入库货物
})

//表单验证
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<form>>({
  typeOfGoods: [{ required: true, message: '货品种类必填', trigger: 'blur' }],
  locationOfGoods: [{ required: true, message: '货品位置必填', trigger: 'blur' }],
  relatedCustomers: [{ required: true, message: '客户号必填', trigger: 'blur' }],
  warehousingTime: [{ required: true, message: '购买时间必填', trigger: 'blur' }],
  paymentAmountType: [{ required: true, message: '付款类型必填', trigger: 'blur' }]
})

// 物品的种类选项
const typeOfGoodsArr: any = reactive([])
const getGoodsSelect = async () => {
  // let goodsTypeArr: any = []
  let res: any = await goodsSelect({})
  res.data.list.forEach((item) => {
    typeOfGoodsArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getGoodsSelect()

// 付款金额类型
let paymentAmountTypeArr: any = reactive([])
const getPayTypeListFn = async () => {
  let res: any = await getPayTypeList({})
  for (let key in res.data) {
    paymentAmountTypeArr.push({
      label: res.data[key],
      value: String(key)
    })
  }
}
getPayTypeListFn()

//货物位置
const locationOfGoodsArr: any = reactive([])
const getStoreSelect = async () => {
  let res: any = await storeSelect({})
  res.data.list.forEach((item) => {
    locationOfGoodsArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getStoreSelect()

// 运输方式
const modeOfTransportArr: any = reactive([])
const getTransportSelect = async () => {
  let res: any = await transportSelect({})
  res.data.list.forEach((item) => {
    modeOfTransportArr.push({
      label: item.name,
      value: item.name
    })
  })
}
getTransportSelect()

//始发地
const originArr: any = reactive([])
const getOriginSelect = async () => {
  let res: any = await placestartSelect({})
  res.data.list.forEach((item) => {
    originArr.push({
      label: item.name,
      value: item.name
    })
  })
}
getOriginSelect()
//客户号
const relatedCustomersArr: any = reactive([])
const getClientSelect = async () => {
  let res: any = await clientSelect({})
  res.data.list.forEach((item) => {
    relatedCustomersArr.push({
      label: item.code,
      value: item.code
    })
  })
}
getClientSelect()

//收货人
const consigneeArr: any = reactive([])
const getConsigneeSelect = async () => {
  let res: any = await consigneeIndex({})
  console.log('---收件人下拉选择---', res)
  res.data.data.forEach((item) => {
    consigneeArr.push({
      label: item.name,
      value: item.name,
      code: item.client_code
    })
  })
}
//
const getKehu = (e) => {
  // console.log(e)
  let data = consigneeArr.find((item) => {
    // console.log(item)
    return item.value == e
  })
  form.relatedCustomers = data.code
  // console.log(data)
}
getConsigneeSelect()
const selectShouhuo = async (e) => {
  consigneeArr.length = 0
  form.recipient = ''
  let data = {
    page: 1,
    limit: 9999,
    search: '',
    sort: '',
    order: '',
    op: `{"client_code":"like"}`,
    filter: `{"client_code":"${e}"}`
  }
  let res: any = await consigneeIndex(data)

  res.data.data.forEach((item) => {
    consigneeArr.push({
      label: item.name,
      value: item.name,
      code: item.client_code
    })
  })
}
// getConsigneeSelect()

//目的地
const placeendArr: any = reactive([])
const getPlaceendSelect = async () => {
  let res: any = await placeendSelect({})
  console.log('---目的地下拉选择---', res)
  res.data.list.forEach((item) => {
    placeendArr.push({
      label: item.name,
      value: item.name
    })
  })
}
getPlaceendSelect()

const addPieceItem = () => {
  let pieceItem = reactive({
    key: form.pieceArray.length + 1,
    title: `${t('warehousingEntryAddWrite.goodsEntry')} ${form.pieceArray.length + 1} ：`,
    gname: '', // 名称
    goods_id: '', // 货物种类
    worth: '', // 单件货值
    total1: '',
    total: '',
    imgUrl: [],
    list: [
      {
        piece: '',
        quantity: '',
        room: '',
        colour: '',
        length: '',
        width: '',
        high: '',
        weight: '',
        remark: '',
        price: '',
        size: ''
      }
    ]
  })
  form.pieceArray.push(pieceItem)
  form.warehousingItems = form.pieceArray.length
}

const delPieceItem = (index) => {
  form.pieceArray.splice(index, 1)
  form.warehousingItems = form.pieceArray.length
}

const rkNumInput = () => {
  form.pieceArray = []
  if (form.warehousingItems) {
    for (let i = 1; i <= form.warehousingItems; i++) {
      let pieceItem = reactive({
        key: i,
        title: `${t('warehousingEntryAddWrite.goodsEntry')} ${i} ：`,
        gname: '', // 名称
        goods_id: '', // 货物种类
        worth: '', // 单件货值
        total1: '',
        total: '',
        imgUrl: [],
        list: [
          {
            piece: '',
            quantity: '',
            room: '',
            colour: '',
            length: '',
            width: '',
            high: '',
            weight: '',
            remark: '',
            price: '',
            size: ''
          }
        ]
      })
      form.pieceArray.push(pieceItem)
    }
  } else {
    form.pieceArray = []
  }

  // console.log('---form.pieceArray---', form.pieceArray)
}
const totalSUM = () => {
  // console.log(form.pieceArray)
  let total = 0 //总合计
  let total_sale = 0
  let caigou = 0
  let prece = 0
  for (let a = 0; a < form.pieceArray.length; a++) {
    form.pieceArray[a].total =
      Number(form.pieceArray[a].piece || 0) * Number(form.pieceArray[a].quantity || 0)
    form.pieceArray[a].total1 =
      Number(form.pieceArray[a].worth || 0) * Number(form.pieceArray[a].total || 0)
    caigou += form.pieceArray[a].total1
    form.pieceArray[a].total_sale =
      Number(form.pieceArray[a].price || 0) * Number(form.pieceArray[a].total || 0)
    total_sale += Number(form.pieceArray[a].total_sale)
    total = Number(Number(total || 0) + Number(form.pieceArray[a].total1 || 0))
    console.log(total, 'total')
    prece += Number(form.pieceArray[a].piece || 0)
  }
  form.total_storage = prece
  // console.log(total, 'total')
  form.priceDifferenceOfGoods = total_sale - caigou
  form.value = total + Number(form.collectionOfFreight) - Number(form.moling ? form.moling : 0) // console.log(total, '总价')
}
// const totalSUMTotal = () => {
//   for (let a = 0; a < form.pieceArray.length; a++) {
//     form.pieceArray[a].total1 = form.pieceArray[a].worth * form.pieceArray[a].total
//     form.pieceArray[a].total_sale = form.pieceArray[a].price * form.pieceArray[a].total
//   }
// }
// const addGoods = (pIndex) => {
//   let goodsItem = {
//     shopNum: '',
//     bz: '',
//     num: '',
//     home: '',
//     color: '',
//     long: '',
//     wide: '',
//     tall: '',
//     weight: ''
//   }
//   form.pieceArray[pIndex].list.push(goodsItem)
// }
// const delGoods = (pIndex, index) => {
//   form.pieceArray[pIndex].list.splice(index, 1)
// }

watch(form, (newVal, oldVal) => {
  // if (form.typeOfGoods) {
  //   form.pieceArray.length > 0 &&
  //     form.pieceArray.forEach((item) => {
  //       item.goods_id = form.typeOfGoods
  //     })
  // }
})

defineExpose({
  getFormData: () => {
    return form
  },
  getRlus: () => {
    return ruleFormRef
  }
})

const { wsCache } = useCache()
const getToken = wsCache.get('userInfo') ? wsCache.get('userInfo').token : ''

const uploadSuccess = (res, file, files, index) => {
  console.log('----ev,index----', res, file, files, index)
  form.pieceArray[index].imgUrl.push({
    name: file.name,
    path: res.data.path,
    url: res.data.url
  })

  console.log('----form.pieceArray[index].imgUrl----', form.pieceArray[index].imgUrl)
}

const removeImg = (file, files, index) => {
  form.pieceArray[index].imgUrl.splice(0, 1)
}
</script>

<template>
  <ElForm :model="form" ref="ruleFormRef" label-width="auto" :rules="rules">
    <ElRow>
      <ElCol :span="6">
        <ElFormItem
          label-width="100px"
          prop="typeOfGoods"
          :label="t('warehousingEntry.typeOfGoods')"
        >
          <ElSelect
            multiple
            filterable
            v-model="form.typeOfGoods"
            :placeholder="t('alertEn.PleaseSelectThetypeOfGoods')"
            clearable
          >
            <ElOption
              v-for="item in typeOfGoodsArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="100px"
          prop="locationOfGoods"
          :label="t('warehousingEntry.locationOfGoods')"
        >
          <ElSelect
            filterable
            v-model="form.locationOfGoods"
            :placeholder="t('alertEn.PleaseSelectThelocationOfGoods')"
            clearable
          >
            <ElOption
              v-for="item in locationOfGoodsArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.modeOfTransport')">
          <ElSelect
            v-model="form.modeOfTransport"
            :placeholder="t('alertEn.PleaseSelectThemodeOfTransport')"
            filterable
          >
            <ElOption
              v-for="item in modeOfTransportArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('router.origin')">
          <ElSelect
            v-model="form.origin"
            filterable
            :placeholder="t('alertEn.PleaseSelectTheorigin')"
          >
            <ElOption
              v-for="item in originArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow>
      <ElCol :span="6">
        <ElFormItem label-width="100px" prop="relatedCustomers" label="客户号">
          <ElSelect
            v-model="form.relatedCustomers"
            filterable
            clearable
            @change="selectShouhuo"
            :placeholder="t('common.inputText')"
          >
            <ElOption
              v-for="item in relatedCustomersArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="100px"
          prop="paymentAmountType"
          :label="t('warehousingEntry.paymentType')"
        >
          <ElSelect
            clearable
            filterable
            v-model="form.paymentAmountType"
            :placeholder="t('alertEn.PleaseSelectPaymentType')"
          >
            <ElOption
              v-for="item in paymentAmountTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" prop="warehousingTime" label="购买时间">
          <ElDatePicker
            v-model="form.warehousingTime"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="t('alertEn.PleaseSelectTheStorageTime')"
            :shortcuts="[
              {
                text: '今天',
                value: new Date()
              }
            ]"
          />
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow>
      <ElCol :span="6">
        <ElFormItem label-width="100px" label="采购总金额">
          <ElInput v-model="form.value" disabled />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.serviceCharge')">
          <ElInput v-model="form.serviceCharge"> <template #append>%</template></ElInput>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" label="代付运费">
          <ElInput v-model="form.collectionOfFreight" @blur="totalSUM" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.factoryRebate')">
          <ElInput v-model="form.factoryRebate">
            <template #append>%</template>
          </ElInput>
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem
          label-width="100px"
          :label="t('warehousingEntryAddWrite.priceDifferenceOfGoods')"
        >
          <ElInput v-model="form.priceDifferenceOfGoods" disabled />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntry.productNameRemarks')">
          <ElInput v-model="form.productNameRemarks" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('purchaseOrderAddWrite.recipient')">
          <ElSelect
            v-model="form.recipient"
            filterable
            :placeholder="t('common.selectText')"
            @change="getKehu"
          >
            <ElOption
              v-for="item in consigneeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('warehousingEntry.destination')">
          <ElSelect v-model="form.destination" filterable :placeholder="t('common.selectText')">
            <ElOption
              v-for="item in placeendArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" :label="t('shippingOrderSettings.taxRate')">
          <ElInput v-model="form.taxRate"> <template #append>%</template></ElInput>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="100px" label="整单抹零">
          <ElInput v-model="form.moling" @input="totalSUM" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="3">
        <ElFormItem label-width="100px" label="入库品类行数">
          <ElInput v-model="form.warehousingItems" />
        </ElFormItem>
      </ElCol>
      <ElCol :offset="1" :span="2">
        <ElButton type="primary" circle :icon="addIcon" size="small" @click="rkNumInput" />
      </ElCol>
      <!-- <ElCol :offset="1" :span="2">
        <ElButton type="primary" circle :icon="addIcon" size="small" @click="addPieceItem" />
      </ElCol> -->
      <ElCol :span="6">
        <ElFormItem label-width="100px" label="入库总件数">
          <ElInput v-model="form.total_storage" disabled />
        </ElFormItem>
      </ElCol>
    </ElRow>

    <ElRow v-for="(vforPieceItem, index) in form.pieceArray" :key="index">
      <ElCol :span="24">
        <ElRow class="listForItem">
          <ElCol :span="1">
            <ElDivider />
          </ElCol>
          <ElCol :span="4">{{ vforPieceItem.title }}</ElCol>
          <ElCol :span="5">
            <ElFormItem :label="t('warehousingEntry.typeOfGoods')">
              <ElSelect
                v-model="vforPieceItem.goods_id"
                :placeholder="t('alertEn.PleaseSelectThetypeOfGoods')"
                filterable
              >
                <ElOption
                  v-for="item in typeOfGoodsArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="2" />
          <ElCol :span="10">
            <ElFormItem
              :prop="'pieceArray.' + index + '.gname'"
              :label="t('warehousingEntryAddWrite.name')"
              :rules="[{ required: true, message: '名称必填', trigger: 'blur' }]"
            >
              <ElInput v-model="vforPieceItem.gname" />
            </ElFormItem>
          </ElCol>

          <ElCol :span="1">
            <ElDivider />
          </ElCol>
        </ElRow>
      </ElCol>
      <ElCol :span="24">
        <ElRow>
          <ElCol :span="2">
            <ElFormItem
              label-width="60px"
              :prop="'pieceArray.' + index + '.piece'"
              :rules="[{ required: true, message: '件数必填', trigger: 'blur' }]"
              :label="t('warehousingEntryAddWrite.numberOfPieces')"
            >
              <ElInput v-model="vforPieceItem.piece" @blur="totalSUM" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="2">
            <ElFormItem
              label-width="80px"
              :prop="'pieceArray.' + index + '.quantity'"
              :rules="[{ required: true, message: '件数必填', trigger: 'blur' }]"
              label="装箱数"
            >
              <ElInput v-model="vforPieceItem.quantity" @blur="totalSUM" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="2">
            <ElFormItem label-width="60px" label="总数">
              <ElInput v-model="vforPieceItem.total" @blur="totalSUM" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="2">
            <ElFormItem label-width="60px" :label="t('purchaseOrderAddWrite.roomNo')">
              <ElInput v-model="vforPieceItem.room" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="2">
            <ElFormItem label-width="60px" :label="t('purchaseOrderAddWrite.color')">
              <ElInput v-model="vforPieceItem.colour" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="2">
            <ElFormItem label-width="60px" :label="t('purchaseOrderAddWrite.long')">
              <ElInput v-model="vforPieceItem.length" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="2">
            <ElFormItem label-width="60px" :label="t('purchaseOrderAddWrite.wide')">
              <ElInput v-model="vforPieceItem.width" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="2">
            <ElFormItem label-width="60px" :label="t('purchaseOrderAddWrite.tall')">
              <ElInput v-model="vforPieceItem.high" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="2">
            <ElFormItem label-width="60px" :label="t('purchaseOrderAddWrite.weight')">
              <ElInput v-model="vforPieceItem.weight" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="6">
            <ElFormItem label-width="60px" :label="t('purchaseOrderAddWrite.notes')">
              <ElInput v-model="vforPieceItem.remark" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="6">
            <ElFormItem
              label="采购单价"
              :prop="'pieceArray.' + index + '.worth'"
              :rules="[{ required: true, message: '采购单价必填', trigger: 'blur' }]"
            >
              <ElInput v-model="vforPieceItem.worth" @blur="totalSUM" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="6">
            <ElFormItem label="销售单价">
              <ElInput v-model="vforPieceItem.price" @blur="totalSUM" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="6">
            <ElFormItem label="采购合计">
              <ElInput v-model="vforPieceItem.total1" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="6">
            <ElFormItem label="销售合计">
              <ElInput v-model="vforPieceItem.total_sale" disabled />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="3">
            <ElFormItem label="图片">
              <ElUpload
                action="http://liuzhen.wunuokeji.cn/api/deliver_attachment/uploadimg"
                :file-list="vforPieceItem.imgUrl"
                :limit="1"
                accept="image/png, image/jpeg"
                :headers="{
                  token: getToken
                }"
                list-type="picture-card"
                :on-success="
                  (res, file, fileList) => {
                    uploadSuccess(res, file, fileList, index)
                  }
                "
                :on-remove="
                  (file, fileList) => {
                    removeImg(file, fileList, index)
                  }
                "
                :on-exceed="
                  () => {
                    ElMessage.info('只能传一张图片')
                  }
                "
              >
                <Icon class="pIcon" icon="ph:plus-thin" :size="30" />
              </ElUpload>
            </ElFormItem>
          </ElCol>
          <ElCol :span="1" :offset="1">
            <ElButton type="danger" :icon="delIcon" circle @click="delPieceItem(index)" />
          </ElCol>
        </ElRow>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less">
.listForItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-col:nth-of-type(2) {
    font-size: var(--el-form-label-font-size);
    padding: 0 15px;
  }
  .el-col:nth-of-type(1) {
    padding-right: 15px;
  }
  .el-col:nth-of-type(6) {
    padding-left: 15px;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-form-item--default {
    margin-bottom: 0;
  }
}
</style>
